<template>
	<div class="filtrate-content">
		<time-type-select 
			v-if="!showYearSelect" 
			@change="timeTypeChange" />
		<!-- 展示年筛选 -->
		<el-date-picker 
			v-if="showYearSelect" 
			v-model="yearValue" 
			:clearable="false" 
			:picker-options="pickerOptions"
			type="year" 
			value-format="yyyy" 
			placeholder="选择年" />
		<!-- 展示部门筛选 -->
		<el-select 
			v-model="structuresSelectValue" 
			placeholder="选择部门" 
			@change="structuresValueChange">
			<el-option 
				v-for="item in deptList" 
				:key="item.id" 
				:label="item.name" 
				:value="item.id" />
		</el-select>
		<el-select 
			v-if="showUserSelect" 
			v-model="userSelectValue" 
			:clearable="true" 
			placeholder="选择员工">
			<el-option 
				v-for="item in userOptions" 
				:key="item.id" 
				:label="item.username" 
				:value="item.id" />
		</el-select>
		<el-button 
			type="primary" 
			@click.native="postFiltrateValue()">搜索</el-button>
		<slot />
	</div>
</template>

<script type="text/javascript">
	import {
		adminStructuresListDialog,
		getsubUserByDep
	} from '@/api/setting/setting'
	import timeTypeSelect from '@/components/timeTypeSelect'
	import moment from 'moment'

	export default {
		name: 'FiltrateHandleView', // 筛选条件
		components: {
			timeTypeSelect
		},
		props: {
			// 模块类型
			moduleType: {
				required: true,
				type: String
			},
			// 是否展示年
			showYearSelect: {
				default: false,
				type: Boolean
			},
			// 展示员工选择
			showUserSelect: {
				default: true,
				type: Boolean
			},
			showCustomSelect: {
				default: false,
				type: Boolean
			},
			customDefault: '',
			customOptions: {
				default: () => {
					return []
				},
				type: Array
			}
		},
		data() {
			return {
				// 年筛选
				pickerOptions: {
					disabledDate(time) {
						return time.getTime() > Date.now()
					}
				},
				yearValue: '',

				/** 时间类型值 */
				timeTypeValue: {},
				/** 部门选择解析数据 */
				structuresProps: {
					children: 'children',
					label: 'label',
					value: 'id'
				},
				deptList: [], // 部门列表
				structuresSelectValue: '',
				/** 用户列表 */
				userOptions: [],
				userSelectValue: '',
				// 图标类型
				customValue: ''
			}
		},
		watch: {},
		mounted() {
			// 自定义选择项 默认值
			if (this.showCustomSelect) {
				this.customValue = this.customDefault
			}
			if (this.showYearSelect) {
				this.yearValue = moment(new Date())
					.year()
					.toString()
			}

			this.$emit('load')
			this.getDeptList(() => {
				// this.postFiltrateValue()
			})
		},

		beforeDestroy() {},
		methods: {
			// 选择更改
			customSelectChange() {
				this.$emit('typeChange', this.customValue)
			},
			// 类型选择
			timeTypeChange(data) {
				this.timeTypeValue = data
			},
			/**
			 * 获取部门列表
			 */
			getDeptList(result) {
				adminStructuresListDialog()
					.then(res => {
						this.deptList = res.data
						if (res.data.length > 0) {
							this.structuresSelectValue = res.data[0].id
							if (this.showUserSelect) {
								this.getUserList() // 更新员工列表
							}
						} else {
							this.structuresSelectValue = ''
						}
						result(true)
					})
					.catch(() => {
						this.$emit('error')
					})
			},
			/** 部门更改 */
			structuresValueChange(data) {
				// 展示员工筛选，执行更新逻辑
				if (this.showUserSelect) {
					this.userSelectValue = ''
					this.userOptions = []
					this.getUserList() // 更新员工列表
				}
			},
			/** 部门下员工 */
			getUserList() {
				var params = {}
				params.structure_id = this.structuresSelectValue
				getsubUserByDep(params)
					.then(res => {
						this.userOptions = res.data
					})
					.catch(() => {
						this.$emit('error')
					})
			},
			postFiltrateValue() {
				const params = {
					structure_id: this.structuresSelectValue
				}

				// 展示员工，返回员工参数
				if (this.showUserSelect) {
					params.re_user_id = this.userSelectValue
				}

				// 展示年和展示时间段类型不同时出现
				if (this.showYearSelect) {
					params.year = this.yearValue
				} else {
					if (this.timeTypeValue.type == 'custom') {
						params.start_time = this.timeTypeValue.startTime
						params.end_time = this.timeTypeValue.endTime
					} else {
						params.type = this.timeTypeValue.value
					}
				}
				this.$emit('change', params)
			}
		}
	}
</script>
<style lang="scss" scoped>
	.filtrate-content {
		padding: 15px 20px 5px 20px;

		.el-date-editor {
			width: 130px;
			margin-right: 15px;
		}

		.el-cascader {
			width: 130px;
			margin-right: 15px;
		}

		.el-select {
			width: 120px;
			margin-right: 15px;
		}

		.el-cascader {
			width: 120px !important;
			margin-right: 15px;
		}
	}

	// 时间选择
	.type-popper {
		.type-content {
			height: 250px;
			overflow-y: auto;

			.type-content-item {
				height: 34px;
				line-height: 34px;
				padding: 0 20px;
				color: #606266;
				position: relative;
				cursor: pointer;

				.mark {
					display: inline-block;
					width: 8px;
					height: 8px;
					border-radius: 4px;
					margin-right: 5px;
					background-color: transparent;
				}
			}

			.selected {
				color: #409eff;
				font-weight: 700;

				.mark {
					background-color: #409eff;
				}
			}

			.type-content-item:hover {
				background-color: #f5f7fa;
			}
		}

		.type-content-custom {
			padding: 5px 20px 10px;
			position: relative;
			overflow: hidden;

			.el-date-editor {
				width: 100%;
				margin-bottom: 8px;
			}

			button {
				float: right;
			}
		}
	}
</style>
